<template>
  <FPage>
    <el-tabs v-model="ativeName" class="default-form-list-tab" @tabChange="tabChange">
      <el-tab-pane class="default-form-list-panel" name="待办" label="待办">
        <FormProcessTODOList ref="FormProcessTODOList" :formId="processDefinition.formId"/>
      </el-tab-pane>
      <el-tab-pane class="default-form-list-panel" name="已办" label="已办">
        <FormProcessDoneList ref="FormProcessDoneList" :formId="processDefinition.formId"/>
      </el-tab-pane>
      <el-tab-pane class="default-form-list-panel" name="待发" label="待发">
        <FormPendingList ref="FormPendingList" :formId="processDefinition.formId"/>
      </el-tab-pane>
      <el-tab-pane class="default-form-list-panel" name="已发" label="已发">
        <FormSentListComponent ref="FormSentListComponent" :formId="processDefinition.formId"/>
      </el-tab-pane>
      <el-tab-pane class="default-form-list-panel" name="督办" label="督办"></el-tab-pane>
    </el-tabs>
  </FPage>
</template>

<script>
import './style.css';
import {getAction} from '@/request/BaseRequest';
import {DefaultMenuDefinition} from '@/components/form/DefaultFormDefinition';
import FormProcessTODOList from '@/components/platwork/FormProcessTODOList/index.vue';
import {DefaultFlowDefinition} from '@/components/flow/DefaultFlowDefinition';
import FormProcessDoneList from '@/components/platwork/FormProcessDoneList';
import FormPendingList from '@/components/platwork/FormPendingList';
import FormSentListComponent from '@/components/platwork/FormSentListComponent';
import FPage from '@/components/layout/FPage.vue';
import {isEmpty} from '@/utils/CommonUtils';

export default {
  name: "FlowWorkList",
  components: {
    FPage,
    FormProcessTODOList,
    FormProcessDoneList,
    FormPendingList,
    FormSentListComponent
  },
  data() {
    return {
      ativeName: '待办',
      menu: DefaultMenuDefinition,
      processDefinition: DefaultFlowDefinition,
      loading: false,
      searchParams: {
        title: undefined
      }
    };
  },
  mounted() {
    this.loadMenuData().then(() => {
      this.loadProcessDefinition();
    });
  },
  methods: {
    tabChange(activeName) {
      this.activeName = activeName;
      if (this.activeName === '待办') {
        this.$nextTick(() => {
          this.$refs.FormProcessTODOList.search();
        });
      }

      if (this.ativeName === '已办') {
        this.$nextTick(() => {
          this.$refs.FormProcessDoneList.search();
        });
      }

      if (this.ativeName === '待发') {
        this.$nextTick(() => {
          this.$refs.FormPendingList.search();
        });
      }

      if (this.ativeName === '已发') {
        this.$nextTick(() => {
          this.$refs.FormSentListComponent.search();
        });
      }
    },
    loadMenuData() {
      return new Promise((success, err) => {
        let menuId = this.$route.query.menuId;
        if (isEmpty(menuId)) return
        this.loading = true;
        getAction('/plat/platAppMenuPublish/queryById', {id: menuId}).then(data => {
          this.loading = false;
          if (data.success) {
            let result = data.result;
            this.setMenu(result);
            success();
          }
        });
      });
    },
    loadProcessDefinition() {
      this.loading = true;
      if (isEmpty(this.menu.flowId)) return
      getAction('/flow/loadProcessDefinition', {id: this.menu.flowId}).then(data => {
        if (data.success) {
          this.setProcessDefinition(data.result);
        } else {
          this.$notification.error({message: data.message, result: data.result, duration: 3});
        }
        this.loading = false;
      });
    },
    setProcessDefinition(processDefinition) {
      this.processDefinition = processDefinition;
    },
    setMenu(menu) {
      this.menu = menu;
    },
    search() {
    },
  },
  watch: {
    '$route.path' : {
      handler(toPath, fromPath) {
        this.ativeName = '待办';
        this.loadMenuData().then(() => {
          this.loadProcessDefinition();
        });
      },
      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    }
  }
};
</script>
